<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>maxx的博客</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/editor/css/froala_editor.css">
    <link rel="stylesheet" href="/editor/css/froala_style.css">
    <link rel="stylesheet" href="/editor/css/plugins/code_view.css">
    <link rel="stylesheet" href="/editor/css/plugins/colors.css">
    <link rel="stylesheet" href="/editor/css/plugins/emoticons.css">
    <link rel="stylesheet" href="/editor/css/plugins/image_manager.css">
    <link rel="stylesheet" href="/editor/css/plugins/image.css">
    <link rel="stylesheet" href="/editor/css/plugins/line_breaker.css">
    <link rel="stylesheet" href="/editor/css/plugins/table.css">
    <link rel="stylesheet" href="/editor/css/plugins/char_counter.css">
    <link rel="stylesheet" href="/editor/css/plugins/video.css">
    <link rel="stylesheet" href="/editor/css/plugins/fullscreen.css">
    <link rel="stylesheet" href="/editor/css/plugins/file.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/css/jquery.atwho.min.css">
    <style>
        div#editor {
            width: 81%;
            margin: auto;
            text-align: left;
        }
        .atwho-view-ul {
            text-align: left;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="/css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="/css/component.css"/>
    <link rel="stylesheet" href="/css/bth.css"/>
    <link href="/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/prism.css"/>
</head>
<body>
<div id="bf">
    <div class="bg"></div>
</div>
<div class="scroll">
    <div class="container">
        <div class="fat">
            <div class="all">
                <div class="header">
                    <div class="header-cover">

                    </div>
                </div>
                <div class="body-cover">
                    <div class="body-top"></div>
                    <div class="body-bottom"></div>
                    <div class="body-left"></div>
                    <div class="body-right"></div>
                </div>
                <div class="body">

                </div>
                <div class="eye-left"></div>
                <div class="eye-right"></div>
            </div>
        </div>
        <div class="text"><span class="wl1">w</span><span class="wl2">e</span><span class="wl3">l</span><span
                class="wl4">c</span><span class="wl5">o</span><span class="wl6">m</span><span class="wl7">e</span></div>
        <section class="grid-wrap content">
            <ul class="grid swipe-rotate" id="grid">
                <li class="iShow" onclick="myClick(this)"><a href="javascript:void(0);"><img src="/img/11111.gif" alt="图片"/>

                    <h3>
                        <i class="write fa fa-plus-square" style="font-weight: 600">&nbsp;&nbsp;WRITE</i>
                    </h3>
                </a></li>
                {{#each(array)}}
                <li class="iShow" onclick="myClick(this)" data-id="{{this.uid}}">
                    <i class="loginChange delete fa fa-trash-o fa-fw">DELETE</i>
                    <i class="loginChange change fa fa-pencil ">EDIT</i>
                    <a href="javascript:void(0);">
                        <img src="/img/({{#if(xindex<26)}}{{xindex}}{{else}}{{xindex%26}}{{/if}}).jpg" alt="图片"/>
                        <h3 class="indexTitle">{{this.utitle}}</h3>
                    </a></li>
                {{/each}}
            </ul>

        </section>
		
    </div>
</div>


<div class="showArticle">
    <img class="ajax-lodingimg" src="/img/loading.gif" alt="img"/>

    <div class="ajax">
        <i class="close fa fa-close"></i>


        <div class="ajax-show">
            <div class="ajax-show-content">
                <img src="/img/(1).gif" class="ajax-img"/>

                <p class="ajax-text">The only people for me are the mad ones, the ones who are mad to live, mad to talk,
                    mad
                    to
                    be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace
                    thing,
                    but
                    burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars.</p>
            </div>
            <i class="bottoms reads fa fa-eye"><span class="Number1">1888</span></i>
            <i class="bottoms ups fa fa-thumbs-up"><span class="Number2">183</span></i>
            <i class="bottoms downs fa fa-thumbs-down"><span class="Number3">15</span></i>
        </div>

        <div class="ajax-edit">
            <input class="title edittitle" placeholder=" 📢 Title">

            <div id="froala-editor">
                <p>Click the Code View button to see the editor content's HTML.</p>
                <img src="/img/(1).gif" class="ajax-img"/>
            </div>
            <i class="fa ups fa-meetup" id="save">&nbsp;保存</i>

        </div>

    </div>
</div>
<div class="hidden">
<li id="newLi" class="iShow" onclick="myClick(this)" data-id="0">
<i class="loginChange delete fa fa-trash-o fa-fw">DELETE</i>
<i class="loginChange change fa fa-pencil">EDIT</i>
<a href="javascript:void(0);">
<img src="/img/(0).jpg" alt="图片"/>
<h3 class="indexTitle">title</h3>
</a>
</li>
<div/>
</body>
<script src="/prism.js"></script>
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/modernizr.custom.js"></script>
<script src="/js/btn.js"></script>
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>
<script src="/js/classie.js"></script>
<script src="/js/colorfinder-1.1.js"></script>
<script src="/js/gridScrollFx.js"></script>
<script src="/js/mouse.js"></script>

<script>
    setTimeout(function () {
        new GridScrollFx(document.getElementById('grid'), {
            viewportFactor: 0.4
        });
    }, 7000)
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.4.0/js/jquery.atwho.min.js"></script>

<script type="text/javascript" src="/editor/js/froala_editor.min.js"></script>

<script type="text/javascript" src="/editor/js/plugins/align.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/colors.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/image.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/file.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/link.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/lists.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/video.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/table.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/url.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/entities.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/save.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/fullscreen.min.js"></script>
<script type="text/javascript" src="/editor/js/plugins/quote.min.js"></script>
<script src='/editor/js/languages/zh_cn.js'></script>
<script>
    $(function () {
        var datasource = ["Jacob", "Isabella", "Ethan", "Emma", "Michael", "Olivia"];

        var names = $.map(datasource, function (value, i) {
            return {
                'id': i, 'name': value, 'email': value + "@email.com"
            };
        });

        var config = {
            at: "@",
            data: names,
            displayTpl: '<li>${name} <small>${email}</small></li>',
            limit: 200
        };

        $('#froala-editor')
                .on('froalaEditor.initialized', function (e, editor) {
                    editor.$el.atwho(config);

                    editor.events.on('keydown', function (e) {
                        if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho('isSelecting')) {
                            return false;
                        }
                    }, true);
                })
                .froalaEditor({
                    // Set the image upload URL.
                    imageUploadURL: '/uploads',
                    // Set the language code.
                    language: 'zh_cn'
                })
    });
</script>
</html>